<template>
  <div class="home">
    <v-scale-screen width="100vw" height="100%">
      <div class="model-container">
        <!-- <Loadingg :loading="showLoading" style="position: absolute;top: 0;z-index: 102;width: 100vw;height: 100vh;" /> -->
        <canvas class="canvas-3d" ref="ref3d"></canvas>
      </div>
    </v-scale-screen>
    <div v-if="showLoading" style="position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);z-index: 101;">
      <div small-bg>
        <dv-loading>
          <div color-white style="color: white">
            Loading...
          </div>
        </dv-loading>
      </div>
    </div>
    <div class="button-position">
      <button class="positions" @click="tabflags">{{ Tabflag ? '查看全景园区' : '返回园区详情' }}</button>
    </div>
    <div class="background-Images"></div>
    <Boxboder :class="['boxboder', !Tabflag ? 'active' : '']"
      style="position: absolute;top: 0;z-index: 100;width: 100vw;overflow-y: auto;height: 100vh;">
      <div class="boxboder-content" style="height: 1000px;">
        <div :class="['left', showflag ? 'active' : '']">
          <div style="display: flex;align-items: start;">
            <img style="margin-right: 5px;margin-top: 3px;"
              src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
              alt="">
            <div style="width: 100%;">
              住户类型统计
              <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
              </div>
            </div>
          </div>
          <div>
            <StatisticsOfHouse />
          </div>
          <div>
            <div style="display: flex;align-items: start;">
              <img style="margin-right: 5px;margin-top: 3px;"
                src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
                alt="">
              <div style="width: 100%;">
                停车位统计
                <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin-top: 30px">
              <div style="position: relative;">
                <img
                  src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u382.svg"
                  alt="">
                <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center">
                  <div>
                    <div style="font-size: 12px;color: #ddd;">总车位</div>
                    <div style="color: #00ffff;font-size: 16px;font-weight: 600;">1000</div>
                  </div>
                </div>
              </div>
              <div style="position: relative;">
                <img
                  src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u382.svg"
                  alt="">
                <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center">
                  <div>
                    <div style="font-size: 12px;color: #ddd;">出售车位</div>
                    <div style="color: #00ffff;font-size: 16px;font-weight: 600;">800</div>
                  </div>
                </div>
              </div>
              <div style="position: relative;">
                <img
                  src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u382.svg"
                  alt="">
                <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center">
                  <div>
                    <div style="font-size: 12px;color: #ddd;">闲置车位</div>
                    <div style="color: #00ffff;font-size: 16px;font-weight: 600;">100</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场A区</span>
                <span style="color: white;font-size: 15px;">100</span>
              </div>
              <div class="ticheA">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场B区</span>
                <span style="color: white;font-size: 15px;">80</span>
              </div>
              <div class="ticheB">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场C区</span>
                <span style="color: white;font-size: 15px;">50</span>
              </div>
              <div class="ticheC">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场D区</span>
                <span style="color: white;font-size: 15px;">60</span>
              </div>
              <div class="ticheD">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场E区</span>
                <span style="color: white;font-size: 15px;">20</span>
              </div>
              <div class="ticheE">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场F区</span>
                <span style="color: white;font-size: 15px;">80</span>
              </div>
              <div class="ticheF">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场G区</span>
                <span style="color: white;font-size: 15px;">30</span>
              </div>
              <div class="ticheG">
                <div class="neiceng"></div>
              </div>
            </div>
            <div style="margin-bottom: 15px;">
              <div class="tingchechang">
                <span>停车场H区</span>
                <span style="color: white;font-size: 15px;">30</span>
              </div>
              <div class="ticheG">
                <div class="neiceng"></div>
              </div>
            </div>

          </div>
        </div>
        <div class="center">
          <div class="top">
            <dv-button class="Btn outputValue" border="Border5" color="#61ddaa">
              <div style="color: white;margin: 15px 50px 10px 50px">总住户</div>
              <Numgundong :numbers="15100" />
            </dv-button>
            <dv-button class="Btn outputValue2" border="Border5" color="#f46363">
              <div style="color: white;margin: 15px 50px 10px 50px">
                房屋总量
              </div>
              <!-- <el-statistic :value="outputValue1" class="outputValue2" /> -->
              <Numgundong :numbers="1057" />
            </dv-button>
            <dv-button class="Btn outputValue3" border="Border5" color="#f6bd16">
              <div style="color: white;margin: 15px 50px 10px 50px">
                车位总量
              </div>
              <Numgundong :numbers="1136" />
            </dv-button>
            <dv-button class="Btn outputValue4" border="Border5" color="#00ffff">
              <div style="color: white;margin: 15px 50px 10px 50px">设备总量</div>
              <Numgundong :numbers="910" />
            </dv-button>
          </div>
          <div class="content">

          </div>
          <div class="footer">
            <div :class="['box', showflag ? 'active' : '']">
              <div style="display: flex;align-items: start;margin-bottom: 20px">
                <img style="margin-right: 5px;margin-top: 3px;"
                  src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
                  alt="">
                <div style="width: 100%;color: white;">
                  出入监控
                  <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <div class="box-item">
                <div class="doors">
                  <div>
                    <img src="@/static/u436.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    1号门（北门）
                  </div>
                </div>
                <div class="doors">
                  <div>
                    <img src="@/static/u439.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    2号门（南门）
                  </div>
                </div>
                <div class="doors">
                  <div>
                    <img src="@/static/u442.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    3号门（西门）
                  </div>
                </div>
                <div class="doors">
                  <div>
                    <img src="@/static/u445.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    4号门（东门）
                  </div>
                </div>
              </div>
            </div>
            <div :class="['box', showflag ? 'active' : '']">
              <div style="display: flex;align-items: start;margin-bottom: 20px">
                <img style="margin-right: 5px;margin-top: 3px;"
                  src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
                  alt="">
                <div style="width: 100%;color: white;">
                  设备使用情况
                  <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <!-- <yuanjindu /> -->
              <div class="box-item">
                <div class="doors">
                  <div>
                    <img src="@/static/u436.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    1号门（北门）
                  </div>
                </div>
                <div class="doors">
                  <div>
                    <img src="@/static/u439.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    2号门（南门）
                  </div>
                </div>
                <div class="doors">
                  <div>
                    <img src="@/static/u442.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    3号门（西门）
                  </div>
                </div>
                <div class="doors">
                  <div>
                    <img src="@/static/u445.jpg" alt="" style="width: 180px;height: 111px;">
                  </div>
                  <div class="title">
                    4号门（东门）
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div :class="['right', showflag ? 'active' : '']">
          <div>
            <div style="display: flex;align-items: start;margin-bottom: 20px">
              <img style="margin-right: 5px;margin-top: 3px;"
                src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
                alt="">
              <div style="width: 100%;color: white;">
                物业报修统计
                <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
                </div>
              </div>
            </div>
            <Zhexiantu />
          </div>
          <div style="margin-top: -30px;">
            <div style="display: flex;align-items: start;margin-bottom: 20px">
              <img style="margin-right: 5px;margin-top: 3px;"
                src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
                alt="">
              <div style="width: 100%;color: white;">
                访客统计
                <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
                </div>
              </div>
            </div>
            <Zhuzhuang />
            <!-- <StackedArea /> -->
          </div>
          <div style="margin-top: -30px;">
            <div style="display: flex;align-items: start;margin-bottom: 20px">
              <img style="margin-right: 5px;margin-top: 3px;"
                src="https://cdn7.axureshop.com/demo2024/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u219.svg"
                alt="">
              <div style="width: 100%;color: white;">
                物业收费统计
                <div style="border-bottom: 1px solid #1392c3;width: 100%;padding-bottom: 10px;">
                </div>
              </div>
            </div>
            <!-- <Zhuzhuang /> -->
            <StackedArea />
          </div>
        </div>
      </div>
    </Boxboder>
  </div>
</template>
<script setup lang="ts">
import Boxboder from '@/components/Boxboder.vue'
import VScaleScreen from "v-scale-screen";
import { Application } from "@splinetool/runtime";
import { onMounted, ref } from "vue";
import Loadingg from "@/components/Lodingg.vue";
import StatisticsOfHouse from './Home/StatisticsOfHouseholds.vue'
import Numgundong from './Home/Numgundong.vue'
import yuanjindu from './Home/yuanjindu.vue'
import Zhexiantu from './Home/zhexiantu.vue'
import Zhuzhuang from './Home/zhuzhuang.vue'
import StackedArea from './Home/StackedArea.vue'
// dom节点渲染完毕再加载
let showflag: any = ref(false)
let Tabflag: any = ref(true)
let activeshow = ref(false)
const tabflags = () => {
  Tabflag.value = !Tabflag.value
  setTimeout(() => {
    activeshow.value = !activeshow.value
  }, 500)
}
onMounted(() => {
  init3dModel();
  showflag = true

});

//TODO:3D模型配置
const ref3d = ref<any>(null);
const showLoading = ref<any>(false);
const publisPath = "https://fe-hmzs.itheima.net";
const init3dModel = () => {
  // 实例化解析器实例
  showLoading.value = true;
  // 1. 实例解析器对象(传入模型将来渲染的节点对象)
  const spline = new Application(ref3d.value);
  // 2. 使用对象load方法去拉取3大模型资源
  spline.load(`${publisPath}/scene.splinecode`).then(() => {
    showLoading.value = false;
    // 模型渲染完毕之后后续的逻辑操作
    // 3. 拉取资源之后.then方法中可以做后续的逻辑操作
  });
};

</script>

<style scoped>
@import '@/assets/Home.css';
</style>